<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@page import="java.io.*,java.util.*,java.sql.*, com.animal.dao.*" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>个人信息</title>

<link rel="stylesheet" type="text/css" href="./bootstrap/css/bootstrap.min.css">
<link href="./bootstrap/css/styles.css" rel="stylesheet">
<link href="./bootstrap/css/my.css" rel="stylesheet">
</head>

<body>
	<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
		<div class="container-fluid">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#sidebar-collapse">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="DailyFileManager.html"><span>实验动物</span>档案管理</a>
				<ul class="user-menu">
					<li class="dropdown pull-right">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user">
						</span> <%String id = String.valueOf(request.getSession().getAttribute("uid")); %><%=id %> <span class="caret"></span></a>
						<ul class="dropdown-menu" role="menu">
							<li><a href="http://www.cau.edu.cn"><span class="glyphicon glyphicon-user"></span> Profile</a></li>
							<li><a href="#"><span class="glyphicon glyphicon-cog"></span> Settings</a></li>
							<li><a href="login.jsp"><span class="glyphicon glyphicon-log-out"></span> Logout</a></li>
						</ul>
					</li>
				</ul>
			</div>				
		</div>
	</nav>
		
	<div id="sidebar-collapse" class="col-sm-3 col-lg-2 sidebar">
		<form role="search">
			<div class="form-group">
				<input type="text" class="form-control" placeholder="Search">
			</div>
		</form>
		<ul class="nav menu">
			<li class="parent ">
				<a href="#">
					<span class="glyphicon glyphicon-list"></span> 管理员信息  <span data-toggle="collapse" href="#sub-item-1" class="icon pull-right"><em class="glyphicon glyphicon-s glyphicon-plus"></em></span> 
				</a>
				<ul class="children collapse" id="sub-item-1">
					<li>
						<a class="" href="DailyPersonalInfo.jsp">
							<span class="glyphicon glyphicon-share-alt"></span> 个人信息
						</a>
					</li>
					<li>
						<a class="" href="DailyChangePassword.jsp">
							<span class="glyphicon glyphicon-share-alt"></span> 修改密码
						</a>
					</li>
				</ul>
			</li>
			
			<li class="parent ">
				<a href="#">
					<span class="glyphicon glyphicon-list"></span> 日常档案管理 <span data-toggle="collapse" href="#sub-item-2" class="icon pull-right"><em class="glyphicon glyphicon-s glyphicon-plus"></em></span> 
				</a>
				<ul class="children collapse" id="sub-item-2">
					<li>
						<a class="" href="DailyFileManagement.jsp">
							<span class="glyphicon glyphicon-share-alt"></span> 管理档案
						</a>
					</li>

				</ul>
			</li>
			
			<li role="presentation" class="divider"></li>
			<li><a href="login.jsp"><span class="glyphicon glyphicon-user"></span>登录页面</a></li>
		</ul>
		<div class="attribution">Created by <a href="#">软工第9组</a></div>
	</div>	
	
	<div class="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main">			
		<div class="row">
			<ol class="breadcrumb">
				<li><a href="DailyFileManager.html"><span class="glyphicon glyphicon-home"></span></a></li>
				<li class="active">管理员信息 > 个人信息</li>
			</ol>
		</div>

		
		<!-- 从这开始添加代码 -->
		
		<div class="row">
			<div class="col-lg-12" id="updataDiv">
				<!-- <iframe src="Home.html" width="100%" height="620px" ></iframe> -->
				<h3><center><b>管理员个人信息</b></center></h3>
				<% 
				id = String.valueOf(request.getSession().getAttribute("uid"));
				String queryStr = "select * from animalfile09_archvist where ID=?";			
				Connection conn = Connect.getCon();
				PreparedStatement pstmt = conn.prepareStatement(queryStr);
				ResultSet rs = null;
				pstmt.setString(1,id);
				rs = pstmt.executeQuery();
				if (rs.next()){
				String the_1 = rs.getString(1);
				String the_2 = rs.getString(3);
				String the_3 = rs.getString(4);
				String the_4 = rs.getString(5);
				String the_5 = rs.getString(7);
				request.setAttribute("uphone", the_4);
				request.setAttribute("umail", the_5);
				%>
				<ul id="nav">
  				<li><a href="#">管理员编号</a></li>
  				<li><input class="form-control" value= <%=the_1%> placeholder="ID" ID="ID" type="text" onblur ="ban_id()" ></li>
				</ul>
				
				<ul id="nav">
  				<li><a href="#">管理员姓名</a></li>
				<li><input class="form-control" value= <%=the_2%> placeholder="name" ID="NAME" type="text" ></li>
				</ul>
				
				<ul id="nav">
  				<li><a href="#">管理员性别</a></li>
				<li>
				<select id="SEX" name="SEX">
					<option value="male">male</option>
					<option value="female">female</option>
				</select></li>
				</ul>
				
				<ul id="nav">
  				<li><a href="#">管理员电话</a></li>
				<li><input class="form-control" value= <%=the_4%> placeholder="phone" ID="PHONE" type="text"  onkeyup="value=value.replace(/[^\d]/g,'')" 
							maxlength=11 onblur="check_phone()"></li>
				</ul>
				
				<ul tabIndex="0" id="nav">
  				<li><a href="#">管理员邮箱</a></li>
  				<li><input class="form-control" value= <%=the_5%> placeholder="e-mail" ID="EMAIL" name="EMAIL" type="text" onblur ="check_mail()"></li>
				</ul>
				
				<div align="center">
				<input type="button" value="保存" id="save" class="btn btn-primary" onclick="getData()"> 
				</div>
		<%
				}
				%>
			</div>
		</div>
	</div>
	
	<script src="./bootstrap/js/jquery-3.1.0.min.js"></script>
	<script src="./bootstrap/js/bootstrap.min.js"></script>
	
<script>
function check_mail(){
	var e = document.getElementsByName("EMAIL")[0].value;
	var p = "${umail}";
	if(!/^[a-zA-Z0-9_-]+@([a-zA-Z0-9]+\.)+(com|cn|net|org)$/.test(e)) {
	document.getElementById("EMAIL").value=p;
	alert("请输入格式正确的 e-mail 地址！");
	}
}
function check_phone(){
	var e = document.getElementById("PHONE").value;
	var p = "${uphone}";
	if(e.length!=11) {
	document.getElementById("PHONE").value=p;
	alert("请输入格式正确的电话号码！");
	}
}
function ban_id(){
	var p = "${uid}";
	document.getElementById("ID").value=p;
	alert("这可不能改呀！");
}
</script>

<script type="text/javascript">
function getData() {
		//1 创建Ajax引擎对象
			var ajax;
			var id,name,sex,phone,email,i;
			if(window.XMLHttpRequest){
				//火狐
				ajax = new XMLHttpRequest();
			}else if (window.ActiveXObject) {
				//IE6、7
				ajax = new ActiveXObject("Msxml2.XMLHTTP");
			}
			
		//2 复写onreadystatement函数
		//获取元素对象
			id = document.getElementById("ID").value;
			name = document.getElementById("NAME").value;
			sex = document.getElementById("SEX").value;
			phone = document.getElementById("PHONE").value;
			email = document.getElementById("EMAIL").value;
			ajax.onreadystatechange=function(){

				//4 判断Ajax状态码
				if(ajax.readyState == 4){
					
					//5 判断响应状态码
					if(ajax.status == 200){
						//获取响应内容
						var result = ajax.responseText;
						//修改元素内容
						alert("修改成功！");
						
					}else if(ajax.status == 404){
						var showdiv = document.getElementById("updataDiv");
						showdiv.innerHTML = "请求资源不存在";
					}else if(ajax.status == 500){
						var showdiv = document.getElementById("updataDiv");
						showdiv.innerHTML = "服务器繁忙";
					}
				}
				
			}
		
		//3 发送请求
			ajax.open("GET","DailyUpdate.jsp?I="+encodeURIComponent(id)+"&N="+encodeURIComponent(name)+"&S="+encodeURIComponent(sex)+"&P="+encodeURIComponent(phone)+"&E="+encodeURIComponent(email),false);
			ajax.send(null); 	
	}
	
function up_check() {
		//1 创建Ajax引擎对象
			var ajax;
			var id,name,sex,phone,email,i;
			if(window.XMLHttpRequest){
				//火狐
				ajax = new XMLHttpRequest();
			}else if (window.ActiveXObject) {
				//IE6、7
				ajax = new ActiveXObject("Msxml2.XMLHTTP");
			}
			
		//2 复写onreadystatement函数
		//获取元素对象
			id = document.getElementById("ID").value;
			name = document.getElementById("NAME").value;
			sex = document.getElementById("SEX").value;
			phone = document.getElementById("PHONE").value;
			email = document.getElementById("EMAIL").value;

			ajax.onreadystatechange=function(){

				//4 判断Ajax状态码
				if(ajax.readyState == 4){
					
					//5 判断响应状态码
					if(ajax.status == 200){
						//获取响应内容
						var result = ajax.responseText;
						//修改元素内容
						
					}else if(ajax.status == 404){
						var showdiv = document.getElementById("updataDiv");
						showdiv.innerHTML = "请求资源不存在";
					}else if(ajax.status == 500){
						var showdiv = document.getElementById("updataDiv");
						showdiv.innerHTML = "服务器繁忙";
					}
				}
				
			}
		
		//3 发送请求
			ajax.open("GET","DailyUpdate.jsp?P="+encodeURIComponent(phone)+"&E="+encodeURIComponent(email),false);
			ajax.send(null); 	
	}

</script>


</body>

</html>
